
<template>
  <div class="sidebar">
    <div class="xx"></div>
<!--    点赞-->
    <div class="detail-like " :class="like" @click="changeLike">
      <div  class="digg-icon">
        <div class="inner">
          <div class="icon_good">
          </div>
        </div>
      </div>
      <span>{{count.likeCount}}</span>
    </div >
<!--    分割-->
    <div class="divide"></div>
<!--评论-->
    <div class="detail-like">
      <div  class="digg-icon">
        <div class="inner">
          <div class="icon_comment">
          </div>
        </div>
      </div>
      <span >评论</span>
    </div >
    <!--    分割-->
    <div class="divide"></div>
<!--    收藏-->
    <div class="detail-like " @click="changeCollect">
      <div  class="digg-icon">
        <div class="inner">
          <img :src="collect" alt="收藏" title="收藏" class="icon_collection">
        </div>
      </div>
      <span>{{count.starCount}}</span>
    </div >
  </div>
</template>

<script>
import {
  articleList,
  articleStatus,
  likeStatusDel,
  likeStatusInsert,
  starStatusDel,
  starStatusInsert
} from "@/utils/api";
import {parseTime} from "../../../public/FormatTime";

export default {
  data(){
    return {
      like: '',
      collect: require('../../../static/image/collection.png'),
      likeMessage: {
        userId: 0,
        articleId: 0
      },
      count: {
        likeCount: 0,
        starCount: 0
      },
    }
  },
  props: {
    userid: Number,
    articleid: {
      type: Number,
    },
    islike: Boolean,
    isStar: Boolean,

  },
  methods: {

    // 点赞
    async changeLike(){
      this.like = this.like==='like' ? '' : 'like'
      this.likeMessage.userId = this.userid
      this.likeMessage.articleId = this.articleid
      // alert(this.likeMessage.userId)
      // alert(this.likeMessage.articleId)

      // 点赞
      if(this.like === 'like'){
        // 使用catch反向逻辑,避免过多逻辑嵌套
        const res = await likeStatusInsert(this.likeMessage).catch(err => {
          // 提示错误, 终止执行
          return console.error(err)
        })
        console.log(res, '请求成功');
        this.count.likeCount++

      }
      // 取消点赞
      else{
        // 使用catch反向逻辑,避免过多逻辑嵌套
        const res = await likeStatusDel(this.likeMessage).catch(err => {
          // 提示错误, 终止执行
          return console.error(err)
        })
        console.log(res, '请求成功');
        if(this.count.likeCount > 0)
          this.count.likeCount--
      }

    },
    // 收藏
    async changeCollect(){
      this.likeMessage.userId = this.userid
      this.likeMessage.articleId = this.articleid

      // 收藏
      if(this.collect === require('../../../static/image/collection.png')){
        this.collect = require('../../../static/image/collection2.svg')
        // 使用catch反向逻辑,避免过多逻辑嵌套
        const res = await starStatusInsert(this.likeMessage).catch(err => {
          // 提示错误, 终止执行
          return console.error(err)
        })
        console.log(res, '请求成功');
        this.count.starCount++
      }
      // 取消收藏
      else{
        this.collect = require('../../../static/image/collection.png')
        // 使用catch反向逻辑,避免过多逻辑嵌套
        const res = await starStatusDel(this.likeMessage).catch(err => {
          // 提示错误, 终止执行
          return console.error(err)
        })
        console.log(res, '请求成功');
        if(this.count.starCount > 0)
          this.count.starCount--
      }

    },

    // 查看点赞数和收藏数
    async getCount() {
      // 使用catch反向逻辑,避免过多逻辑嵌套
      const res = await articleStatus(this.articleid).catch(err => {
        // 提示错误, 终止执行
        return console.error(err)
      })
      console.log(res, '请求成功');
      this.count.likeCount = res.data.likeCount
      this.count.starCount = res.data.starCount
    },



  },
  mounted() {
    // alert(this.islike)
    if(this.islike)
      this.like = 'like'
    else
      this.like = ''

    // alert(this.isStar)
    if(this.isStar)
      this.collect = require('../../../static/image/collection2.svg')
    else
      this.collect = require('../../../static/image/collection.png')

    this.getCount()




  }
}
</script>

<style scoped>
.sidebar {
  position: fixed;
  top: 400px;
  right: 1%;
  height: 300px;
  width: 65px;
  background-color: skyblue;
  color: #fff;
  overflow-y: auto;
}
.xx{
  height:8px;
}
.detail-like {
  text-align: center; /* 让子元素水平居中 */
  cursor: pointer;
  color: #222;
  outline: none;
}
 .like {
  color: #f04142;
}

.digg-icon {
  position: relative;
  margin:2px 7px;
  border-radius: 24px;
  width: 48px;
  height: 48px;
  background: #f8f8f8;
}
.like .digg-icon {
  background: #fff2f2;
}
.detail-like .digg-icon .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0;
}

.detail-like .digg-icon .icon_good {
  display: block;
  width: 24px;
  height: 24px;
  background-size: contain;
  background: url(//lf3-cdn2-tos.bytescm.com/toutiao/toutiao_web_pc/svgs/like.0caed57a.svg) no-repeat 50%;
}
.like .digg-icon .icon_good{
  background:url(//lf3-cdn2-tos.bytescm.com/toutiao/toutiao_web_pc/svgs/like_active.b265cb30.svg);
}
.detail-like .digg-icon .icon_comment {
  display: block;
  width: 24px;
  height: 24px;
  background-size: contain;
  background:url(//lf3-cdn2-tos.bytescm.com/toutiao/toutiao_web_pc/svgs/icon_comment.d319bd6b.svg) no-repeat 50%;
}
.detail-like .digg-icon .icon_collection {
  display: block;
  width: 30px;
  height: 30px;
  //background-size: contain;
  //background: url("../../../static/image/collect.svg") no-repeat 50%;
}

 .divide {
  margin: 16px auto;
  width: 24px;
  height: 1px;
  background: #e8e8e8;
}
</style>
